<template>
  <div class="kszp">
    <div class="head">
      <span>考生照片导入</span>
      <button @click="clear">清空</button>
    </div>

    <div class="number">已选取 {{ number }} 个文件</div>

    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://118.31.51.131:8081/api/zsxt/lqgl/ksxx/drzp"
      :data="{ token: token }"
      multiple
      accept=".jpg,.png"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleErr"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" style="width: 110px" size="small" type="primary"
        >选取文件</el-button
      >
      <el-button
        style="margin-left: 40px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
    </el-upload>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "",
  data() {
    return {
      number: 0,
      fileList: [],
      token: sessionStorage.getItem("token"),
    };
  },
  methods: {
    clear() {
      this.number = 0;
      this.fileList = [];
      this.$refs.upload.clearFiles();
    },
    handleChange(file, fileList) {
      this.number = fileList.length;
    },
    handleRemove(file, fileList) {
      this.number = fileList.length;
    },
    handleSuccess(res, file, fileList) {
      console.log(res);
      this.$refs.upload.clearFiles();
      alert("上传成功");
    },
    handleErr(err) {
      console.log(err);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 4] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  components: {},
};
</script>

<style scoped>
.head {
  height: 80px;
  border-bottom: 1px solid black;
}
.head span {
  font-size: 20px;
  line-height: 80px;
  margin-left: 25px;
}
.head button {
  width: 100px;
  height: 50px;
  margin-left: 1260px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
.head button:active {
  opacity: 0.8;
}
.number {
  position: absolute;
  left: calc(50% - 150px);
  top: 250px;
  font-size: 24px;
}
.upload-demo {
  position: absolute;
  left: calc(50% - 150px);
  top: 200px;
  height: 50px;
  width: 300px;
}
.kszp ::v-deep .el-upload-list {
  margin-top: 50px;
  height: 500px;
  overflow-y: auto;
}
</style>